@extends('User.header')
@section('cssStyle')
    <link rel="stylesheet" href="{{asset('/css/home.css')}}">
    <link rel="stylesheet" href="{{asset('/css/log.css')}}">
@endsection
@section('content')
    <div class="header">
        @include('User.Tool.error')
        <ul class="nav nav-pills">
            <li id="shouye"><a href="{{url('/homePage')}}">首页</a></li>
            <li id="yonghuguanli"><a href="{{url('/home/user/getList')}}">用户管理</a></li>
            <li id="shebeiguanli"><a href="#">设备管理</a></li>
            <li id="caozuorizhi" class="active"><a href="{{url('/home/log/getListView')}}">操作日志</a></li>
        </ul>
    </div>
    <table class="table1">
        <thead>
        <tr>
            <th>ID</th>
            <th>记录时间</th>
            <th>记录</th>
        </tr>
        </thead>
        <tbody id="Record">

        </tbody>
    </table>


    <div class="pagination">
        <a  href="#">«</a>
        <a class="active-color" href="#">1</a>
    </div>


@endsection

@section('scriptStyle')
    <script type="text/javascript">
    $(function () {
        var pageSize = 10;
        var pageNum = 1;

        $.ajax({
            url:'http://192.168.1.134/home/log/getList?type=1&pageSize='+pageSize+'&pageNum='+pageNum,
            type:'get',
            async:false,
            dataType:'json',
            success:function (data) {
                var t = data.data.count/pageSize;
                t = Math.ceil(t);
                for(var j = 2; j <= t; j++)
                {
                    $('.pagination').append('<a href="#">'+j+'</a>');
                }
                $('.pagination').append('<a href="#">»</a>');
                /*绑定点击事件*/
                $(".pagination a").click(function(){
                    $(this).siblings("a").removeClass("active-color");//点击后移除当前所有li的样式
                    $(this).addClass("active-color");//移除样式后，给当前点击的li添加样式
                })

                $(".pagination a").click(function(){
                    pageNum =$('.active-color').html();
                    if(isNaN(pageNum))
                    {
                       alert('没有数据啦！');
                    }else{
                        $('#Record').html('');
                        getData();//点击分页时调用
                    }
                });
            }
        });

       function getData(){
           // $.getJSON(
           //     'http://192.168.1.136/home/log/getList?type=1&pageSize='+pageSize+'&pageNum='+pageNum,
           //     function (data) {
           //         var t = data.data.count/pageSize;
           //         t = Math.ceil(t);
           //         for(var j = 2; j <= t; j++)
           //         {
           //             document.getElementsByClassName('pagination')[0].innerHTML += '<a href="#">'+j+'</a>';
           //         }
           //         document.getElementsByClassName('pagination')[0].innerHTML += '<a href="#">»</a>';
           //
           //         for(var i=0;i<data.data.data.length;i++)
           //         {
           //             var str = '<tr><td>'+data.data.data[i].id+'</td><td>'+data.data.data[i].time+'</td><td>'+data.data.data[i].record+'</td></tr>'
           //             document.getElementById('Record').innerHTML += str
           //         }
           //     }
           // );

           $.ajax({
               url:'http://192.168.1.134/home/log/getList?type=1&pageSize='+pageSize+'&pageNum='+pageNum,
               type:'get',
               async:true,
               dataType:'json',
               success:function (data) {
                   for(var i=0;i<data.data.data.length;i++)
                   {
                       var str = '<tr><td>'+data.data.data[i].id+'</td><td>'+data.data.data[i].time+'</td><td>'+data.data.data[i].record+'</td></tr>'
                       $('#Record').append(str)
                   }
               }
           });
        };

       getData();//一进页面时调用

    });

    </script>
@endsection
